<template>
  <div>
    <div ref="mapLine" style="width: 80vw;height:80vh;"></div>
  </div>
</template>

<script>
  import $ from 'jquery';
  import 'echarts-gl';
  import * as echarts from 'echarts';
  require("echarts/theme/macarons");
  export default {
    name: 'trajectory',
    mounted() {
      this.getMapLine2();
    },
    methods: {
      getMapLine() {
        let res = [
          [{
              name: '上海',
              coord: [121, 31]
            },
            {
              name: '西安',
              coord: [108, 35]
            }
          ]
        ];
        let res1 = [{
          value: [99, 10],
          name: '雅加达'
        }];
        let data = require("./utils/geoJson.Json");
        echarts.registerMap("world", data);
        let chartLine = echarts.init(this.$refs.mapLine);
        chartLine.setOption({
          backgroundColor: "transparent",
          geo: {
            map: "world",
            zoom: 1.2,
            layoutSize: 100,
            silent: true,
            label: {
              //鼠标触发不显示地区名
              emphasis: {
                show: false
              }
            },
            roam: true, //是否允许缩放
            itemStyle: {
              normal: {
                color: "rgba(53, 57, 84, 1)" //地图背景色
              },
              emphasis: {
                color: "rgba(255, 255, 0, 0.5)" //悬浮背景
              }
            },
            boundingCoords: [
              // 定位左上角经纬度
              [-180, 90],
              // 定位右下角经纬度
              [180, -90]
            ]
          },
          series: [{
              type: "lines",
              zlevel: 2,
              effect: {
                show: true,
                trailWidth: 1,
                trailOpacity: 1,
                trailLength: 0.9,
                color: '#389FFF',
                //constantSpeed: 1
              },
              lineStyle: {
                normal: {
                  color: 'rgb(17, 71, 141)',
                  width: 1, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0.2 //尾迹线条曲直度
                }
              },
              emphasis: {
                effect: {
                  show: true,
                  trailWidth: 1,
                  trailOpacity: 1,
                  trailLength: 0.15,
                  color: 'rgb(218, 66, 255)'
                  //constantSpeed: 1
                },
                lineStyle: {
                  color: '#CC38FF',
                  width: 1, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0.2 //尾迹线条曲直度
                }
              },
              data: res
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                //涟漪特效
                period: 3, //动画时间，值越小速度越快
                brushType: "stroke", //波纹绘制方式 stroke, fill
                scale: 3 //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                normal: {
                  show: true,
                  position: "right", //显示位置
                  offset: [5, 0], //偏移设置
                  formatter: function(params) {
                    //圆环显示文字
                    return params.data.name;
                  },
                  fontSize: 13,
                  color: "#f0f0f0"
                },
                emphasis: {
                  show: true
                }
              },
              symbol: "circle",
              symbolSize: function(val) {
                return 1; //圆环大小
              },
              itemStyle: {
                normal: {
                  show: false,
                  color: "rgba(132, 148, 241, 1)"
                }
              },
              data: res1
            }
          ]
        });
        //点击事件,根据点击某个省份计算出这个省份的数据
        chartLine.on('click', function(params) {
          console.log(params);
          //逻辑控制

        });
      },
      getMapLine2() {
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var myChart = echarts.init(this.$refs.mapLine);
        var option;
        $.get(ROOT_PATH + '/data/asset/data/lines-bus.json', function(data) {
          var hStep = 300 / (data.length - 1);
          var busLines = [].concat.apply([], data.map(function(busLine, idx) {
            var prevPt;
            var points = [];
            for (var i = 0; i < busLine.length; i += 2) {
              var pt = [busLine[i], busLine[i + 1]];
              if (i > 0) {
                pt = [
                  prevPt[0] + pt[0],
                  prevPt[1] + pt[1]
                ];
              }
              prevPt = pt;

              points.push([pt[0] / 1e4, pt[1] / 1e4]);
            }
            return {
              coords: points,
              lineStyle: {
                normal: {
                  color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                }
              }
            };
          }));
          myChart.setOption(option = {
            bmap: {
              center: [116.46, 39.92],
              zoom: 10,
              roam: true,
              mapStyle: {
                'styleJson': [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                      'color': '#031628'
                    }
                  },
                  {
                    'featureType': 'land',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#000102'
                    }
                  },
                  {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                      'color': '#000000'
                    }
                  },
                  {
                    'featureType': 'arterial',
                    'elementType': 'geometry.stroke',
                    'stylers': {
                      'color': '#0b3d51'
                    }
                  },
                  {
                    'featureType': 'local',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#000000'
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'geometry.fill',
                    'stylers': {
                      'color': '#000000'
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'geometry.stroke',
                    'stylers': {
                      'color': '#08304b'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'geometry',
                    'stylers': {
                      'lightness': -70
                    }
                  },
                  {
                    'featureType': 'building',
                    'elementType': 'geometry.fill',
                    'stylers': {
                      'color': '#000000'
                    }
                  },
                  {
                    'featureType': 'all',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                      'color': '#857f7f'
                    }
                  },
                  {
                    'featureType': 'all',
                    'elementType': 'labels.text.stroke',
                    'stylers': {
                      'color': '#000000'
                    }
                  },
                  {
                    'featureType': 'building',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#022338'
                    }
                  },
                  {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#062032'
                    }
                  },
                  {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                      'color': '#465b6c'
                    }
                  },
                  {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                      'color': '#022338'
                    }
                  },
                  {
                    'featureType': 'label',
                    'elementType': 'all',
                    'stylers': {
                      'visibility': 'off'
                    }
                  }
                ]
              }
            },
            series: [{
              type: 'lines',
              coordinateSystem: 'bmap',
              polyline: true,
              data: busLines,
              silent: true,
              lineStyle: {
                // color: '#c23531',
                // color: 'rgb(200, 35, 45)',
                opacity: 0.2,
                width: 1
              },
              progressiveThreshold: 500,
              progressive: 200
            }, {
              type: 'lines',
              coordinateSystem: 'bmap',
              polyline: true,
              data: busLines,
              lineStyle: {
                width: 0
              },
              effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.1,
                symbolSize: 1.5
              },
              zlevel: 1
            }]
          });
        });

        option && myChart.setOption(option);

      }
    }
  }
</script>

<style>
</style>
